<template>
	<!-- 谱文类目 -->
	<view>
		<view class="wen_category">
			<view class="gory_title">
				<view class="gory_title_a">谱文类目</view>
				<view v-if="!is_del" class="gory_title_b" @tap="compile">编辑</view>
				<view v-else class="gory_title_b" @tap="finish">完成</view>
			</view>
			
			<view class="gory_list">
				<view class="gory_item" :class="{active:gory_index==item.id}" @tap="taggle(item)" v-for="(item,index) in goryList" :key="index">
					<view>{{item.title}}</view>
					<image @tap="remove(item)" v-show="item.family_id>0&&is_del" class="del_img" :src="photo_cdn + 'zpupload/static/zupu/delete.png'"></image>
				</view>
			</view>
			<view @tap="create_gory" class="create_gory">+ 新建类目</view>
			
			<uni-popup ref="category_popup" type="center" :mask-click="false" :animation="true">
				<view class="category_card">
					<view class="card_title">新建类目</view>
					<input class="category_input" v-model="category_title" type="text" value="" placeholder="请输入类目" ></input>
					<view class="category_btn">
						<view class="celect_btn" @tap="cancel">取消</view>
						<view class="celect_btn" @tap="confirm">确认</view>
					</view>
				</view>
			</uni-popup>	
		</view>
		<view class="determine" @tap="deter_click">
			<view class="deter_btn">确定</view>
		</view>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	import {getColumnList,addColumn,delColumn} from "@/utils/api/zupu.js";
	export default{
		data(){
			return{
				photo_cdn,
				family_id:'',
				is_del:false,
				goryList:[],
				category_title:'',
				pitch_title:'',//选中的类目
				gory_index:1
			}
		},
		onLoad(option){
			this.family_id = option.family_id?option.family_id:'';
			this.getColumnListfun();
		},
		methods:{
			create_gory(){
				this.$refs.category_popup.open();
			},
			cancel(){
				this.$refs.category_popup.close();
			},
			getColumnListfun(){
				getColumnList({
					family_id:this.family_id
				}).then(res=>{
					if(res.code==1){
						this.goryList = res.data.list;
						this.pitch_title = res.data.list[0].title;
					}
				})
			},
			//切换
			taggle(item){
				if(this.gory_index==item.id){
					return false;
				}
				this.gory_index = item.id;
				this.pitch_title = item.title;
			},
			//点击确认
			confirm(){
				addColumn({
					family_id:this.family_id,
					title:this.category_title
				}).then(res=>{
					this.$api.msg(res.msg)
					if(res.code==1){						
						this.getColumnListfun()
						setTimeout(()=>{
							this.$refs.category_popup.close();
						},1000)
					}
				})
			},
			//点击编辑
			compile(){
				this.is_del = true;
			},
			//点击完成
			finish(){
				this.is_del = false;
			},
			//点击删除图标
			remove(item){
				console.log(item,'111');
				this.$showModal({
					title:'提示',
					concent:`是否删除“${item.title}”类目？`,
					confirmVal:'确定',
					cancelVal:'取消',
				}).then(res=>{
					delColumn({
						column_id:item.id,
					}).then(ress=>{
						this.$api.msg(ress.msg)
						if(ress.code==1){
							this.getColumnListfun();
						}
					})
				}).catch(err=>{
					console.log(err)
				})	
			},
			//点击确定
			deter_click(){
				console.log('222')
				uni.navigateTo({
					url:`/pages/zupu/puwen/create_puwen/create_puwen?pitch_title=${this.pitch_title}&column_id=${this.gory_index}&family_id=${this.family_id}`
				})
			}
		}		
	}
</script>

<style lang="scss">
	@import "./wen_category.scss"
</style>